
<template>
 <div>
    <div>
        <!-- @changeMonth="changeMonth"    // 切换月时的事件，可自己定义事件
            @eventClick="eventClick"      // 点击当天的事件，可自己定义事件
            @dayClick="dayClick"          // 点击当月的事件，可自己定义事件
            @moreClick="moreClick"></full-calendar>    // 点击 more, 展示当天所有事件，可自己定义事件
        -->
       <full-calendar :events="monthData" 
                         first-day='0' locale="fr"
                         defaultView="dayGridMonth"
                         @changeMonth="changeMonth"    
                         @eventClick="eventClick"      
                         @dayClick="dayClick"        
                         @moreClick="moreClick"
                         >
    </full-calendar>    
    </div>
    <div>
        <el-dialog title="添加事项" :visible.sync="dialogFormVisible_tianjia"  @closed="handleClose">
            <el-form :model="eventForm"  ref="eventFormRef" label-width="210px">
                <el-form-item label="想要添加的事项： "  prop="title">
                  <el-input v-model="eventForm.title" ></el-input>
                </el-form-item>
                <!-- <el-form-item label="开始日期（例：2021-5-1）" >
                    <el-input v-model="eventForm.start" ></el-input>
                  </el-form-item> -->
                  <el-form-item label="结束日期（例：2021-5-5）" prop="end">
                    <el-input v-model="eventForm.end" ></el-input>
                  </el-form-item>
            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_tianjia = false">取 消</el-button>
                <el-button type="primary" @click="addEvent">确 定</el-button>
            </div>
        </el-dialog>
      </div>
      <!-- 修改的弹窗 -->
      <div>
        <el-dialog title="修改事项" :visible.sync="dialogFormVisible_xiugai"  @closed="handleClose_xiugai"
        :close-on-click-modal=false>
            <el-form :model="xiugaiEvent"  ref="xiugaiEventRef" label-width="210px">
                <el-form-item label="想要添加的事项： "  prop="title">
                  <el-input v-model="xiugaiEvent.title" ></el-input>
                </el-form-item>
                <el-form-item label="开始日期（例：2021-5-1）" prop="start">
                    <el-input v-model="xiugaiEvent.start" ></el-input>
                  </el-form-item>
                  <el-form-item label="结束日期（例：2021-5-5）" prop="end">
                    <el-input v-model="xiugaiEvent.end" ></el-input>
                  </el-form-item>
            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="shanchu">删除该事项</el-button>
                <el-button type="primary" @click="dialogFormVisible_xiugai = false">确定修改</el-button>
            </div>
        </el-dialog>
      </div>

</div>
</template>
<script>
import { FullCalendar } from 'vue-fullcalendar'
export default {
    components: {'full-calendar': require('vue-fullcalendar')},
    data() {
        return {
            dialogFormVisible_tianjia: false,
            dialogFormVisible_xiugai:false,
            // 弹窗中表单
            eventForm:{
                title:'',
                end:'',
            },
            xiugaiEvent:{},
            // 事项列表
            monthData: [
                {
                title : '答辩', // 事件内容
                start : '2021-6-7', // 事件开始时间
                end : '2021-6-7',
                },
                {
                title : '毕业回家', // 事件内容
                start : '2021-6-24', // 事件开始时间
                end : '2021-6-24',
                },
                {
                title : '修改论文', // 事件内容
                start : '2021-5-31', // 事件开始时间
                end : '2021-6-9',
                },
            ] 
            
        }
    },
    methods: {
        // 选择月份
        changeMonth (start, end, current) {
        console.log('changeMonth')
        },
        // 点击事件
        eventClick (event, jsEvent, pos) {
        // console.log('eventClick', event, jsEvent, pos)
        console.log(this.xiugaiEvent)
        this.xiugaiEvent=event
        this.dialogFormVisible_xiugai=true
        },
        
        // 点击当天
        dayClick (arg) {
            this.dialogFormVisible_tianjia=true
            // 今天的日期
            this.eventForm.start=arg
        },
        // 弹窗添加，点击确定调用
        addEvent(){
            
            this.monthData.push(
                {
                    title:this.eventForm.title,
                    start:this.eventForm.start,
                    end:this.eventForm.end
                }
            )
            console.log(this.today)
            this.dialogFormVisible_tianjia=false
        },

        // 查看更多
        moreClick (day, events, jsEvent) {
        console.log('moreCLick', day, events, jsEvent)
        },
        handleClose(){
            this.$refs.eventFormRef.resetFields()
        },
        handleClose_xiugai(){
            
            this.dialogFormVisible_xiugai=false
        },
        shanchu(){
            this.xiugaiEvent.start=''
            this.xiugaiEvent.title=''
            this.xiugaiEvent.end=''
            this.dialogFormVisible_xiugai=false
        }
    }
}
</script>

<style >

.red {
    background: red;
}
.blue {
background: blue;
}
</style>